<template>
  <section>
    <el-row>
      <el-card>
        <el-col :span="24">
          <div>
            <el-row :gutter="4">
              <el-form :inline="true" label-width="70px">
                <el-form-item label="表名:">
                  <el-select v-model="searchDto.tableName" placeholder="请选择">
                    <el-option
                      v-for="item in tableList"
                      :key="item.tableName"
                      :label="item.tableComment"
                      :value="item.tableName"
                    >
                      <span
                        style="float: left;margin-right:10px;font-weight: bold"
                      >
                        {{ item.tableName }}
                      </span>
                      <span style="float: right;">{{ item.tableComment }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="getPageData"
                    >查询
                  </el-button>
                  <el-button type="primary" icon="el-icon-s-open" @click="clear"
                    >重置
                  </el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="newField"
                    >新增实例显示字段
                  </el-button>
                </el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-refresh-right"
                  @click="initialization"
                  :loading="loading"
                  >初始化显示字段
                </el-button>
              </el-form>
            </el-row>
          </div>
          <div class="table-content">
            <page-table
              ref="multipleSelection"
              :page-data="pageData"
              :loading="loading"
              :do-get-page-data="getPageData"
            >
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="100"
              ></el-table-column>
              <el-table-column
                prop="tableName"
                label="表名"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="fieldName"
                align="center"
                label="字段名"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="showTitle"
                align="center"
                label="标题"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.type | keyText("INSTANCE_FIELD") }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="isShow" align="center" label="是否显示">
                <template slot-scope="scope">
                  {{ scope.row.isShow === true ? "是" : "否" }}
                </template>
              </el-table-column>
              <el-table-column
                width="200"
                label="管理"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="编辑" placement="top">
                    <el-button
                      type="button"
                      size="mini"
                      icon="el-icon-edit"
                      @click="editField(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="delField(scope.row)"
                    >
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
            <el-dialog
            :close-on-click-modal="false"
              :visible.sync="showFieldStatus"
              v-if="showFieldStatus"
              title="新增/修改流程实例显示字段:"
              width="40%"
              @close="fail"
            >
              <el-row>
                <el-col :span="24">
                  <el-form
                    ref="form"
                    :model="formInfo"
                    :rules="rules"
                    label-width="90px"
                  >
                    <el-form-item label="表名:" prop="tableName">
                      <el-select
                        v-model="formInfo.tableName"
                        placeholder="请选择"
                        style="width:300px"
                        @change="typeChange"
                      >
                        <el-option
                          v-for="item in tableList"
                          :key="item.tableName"
                          :label="item.tableName"
                          :value="item.tableName"
                        >
                          <span
                            style="float: left;margin-right:10px;font-weight: bold"
                          >
                            {{ item.tableName }}
                          </span>
                          <span style="float: right;">
                            {{ item.tableComment }}
                          </span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="字段名:" prop="fieldName">
                      <el-select
                        v-model="formInfo.fieldName"
                        placeholder="请选择或手动输入"
                        filterable
                        style="width: 300px"
                        @blur="blurSelect"
                      >
                        <el-option
                          v-for="item in fieldList"
                          :key="item.columnName"
                          :label="item.columnName"
                          :value="item.columnName"
                        >
                          <span
                            style="float: left;margin-right:10px;font-weight: bold"
                          >
                            {{ item.columnName }}
                          </span>
                          <span style="float: right;">
                            {{ item.columnComment }}
                          </span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="类型:" prop="type">
                      <el-select v-model="formInfo.type" placeholder="请选择">
                        <el-option
                          v-for="item in fieldTypes"
                          :key="item.keyword"
                          :label="item.label"
                          :value="item.keyword"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="显示标题:" prop="showTitle">
                      <el-input
                        v-model="formInfo.showTitle"
                        placeholder="请输入显示标题"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="是否显示:" prop="isShow">
                      <el-switch
                        v-model="formInfo.isShow"
                        active-color="#13ce66"
                        active-text="是"
                        inactive-text="否"
                        :active-value="true"
                        :inactive-value="false"
                      >
                      </el-switch>
                    </el-form-item>
                    <el-form-item label="内容:" prop="content">
                      <el-input
                        v-model="formInfo.content"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入模板内容"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                      <el-input-number
                        v-model="formInfo.sort"
                        :min="0"
                        label="描述文字"
                        step-strictly
                      ></el-input-number>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <div slot="footer">
                <el-button type="primary" @click="saveField">
                  保存
                </el-button>
                <el-button @click="fail">
                  取消
                </el-button>
              </div>
            </el-dialog>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </section>
</template>
<script>
import _ from "lodash";

export default {
  created() {
    this.getPageData();
    this.getTable();
  },
  data() {
    return {
      rules: {
        tableName: [
          { required: true, message: "请输入表名称", trigger: "blur" }
        ],
        fieldName: [
          { required: true, message: "请输入字段名称", trigger: "blur" }
        ],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        showTitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      formInfo: {
        tableName: "",
        fieldName: "",
        type: "",
        content: "",
        showTitle: "",
        isShow: true,
        sort: ""
      },
      showFieldStatus: false,
      loading: false,
      pageData: {},
      tableList: {},
      fieldList: {},
      searchDto: { tableName: "", pageIndex: "", pageSize: 10 },
      fieldTypes: this.getDictionary("INSTANCE_FIELD")
    };
  },
  methods: {
    blurSelect(e) {
      this.formInfo.fieldName = e.target.value;
    },
    //表修改重新获取字段
    typeChange(val) {
      this.formInfo.fieldName = "";
      this.getField(val);
    },
    //获取字段列表
    getField(val) {
      let tem = { tableName: val };
      this.API.getWorkflowTableFieldList(tem).then(ret => {
        this.fieldList = ret.data;
      });
    },
    //获取所有表
    getTable() {
      this.API.getWorkflowTableList().then(ret => {
        this.tableList = ret.data;
      });
    },
    //分页
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getWorkflowFieldPageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    },
    //新增字段
    newField() {
      this.showFieldStatus = true;
    },
    editField(row) {
      this.formInfo = _.clone(row);
      this.getField(this.formInfo.tableName);
      this.showFieldStatus = true;
    },
    delField(row) {
      this.$confirm("确认删除当前数据?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteWorkflowFieldById(tem).then(res => {
            this.success("删除成功");
            this.getPageData();
          });
        })
        .catch(() => {});
    },
    //初始化
    initialization() {
      this.loading = true;
      this.API.initWorkflowField().then(ret => {
        this.success("初始化成功");
        this.getPageData();
        this.loading = false;
      });
    },
    //确定
    saveField() {
      let tem = { body: this.formInfo };
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateWorkflowField(tem).then(ret => {
            this.success("操作成功");
            this.getPageData();
            // this.showFieldStatus = false;
            this.fail();
          });
        } else {
          return false;
        }
      });
    },
    fail() {
      this.showFieldStatus = false;
      this.formInfo = {
        tableName: "",
        fieldName: "",
        type: "",
        content: "",
        showTitle: "",
        isShow: true,
        sort: ""
      };
      // this.tableList = {};
      this.fieldList = {};
    },
    //清空
    clear() {
      this.searchDto = { tableName: "", pageIndex: "", pageSize: 10 };
      this.getPageData(1);
    }
  }
};
</script>
<style scoped>
/deep/ .el-switch__label {
  color: #99b4ca;
}

/deep/ .el-switch__label.is-active {
  color: #409eff;
}
</style>
